<% has_unread_notifications = notifications.unread.exists? %>
<div id="notifications" class="relative inline-flex" data-controller="dropdown">
  <button data-action="click->dropdown#toggle click@window->dropdown#hide"
    role="button" data-dropdown-target="button"
    class="cpy-notifications-dropdown btn btn-slide btn-sm btn-primary btn-ghost relative"
    aria-haspopup="true" aria-expanded="false">
    <i class="ti ti-bell relative">
      <% if has_unread_notifications %>
        <span class="js-notifications-ping size-2 absolute top-[0px] right-[-2px] status status-sm status-info"></span>
      <% end %>
    </i>
    <span class="sliding-text"><span class="sliding-text-inner"><%= t('menu_items.notifications') %></span></span>
  </button>
  <div data-dropdown-target="menu" class="bg-base-100 origin-top-right z-10 absolute top-full w-56 md:w-86  rounded-lg shadow-lg overflow-hidden mt-1 right-0 hidden">
    <div class="flex flex-col text-base-content">
      <div class="border-b border-base-200 px-4 py-2 flex items-center justify-between">
        <h6 class="text-sm font-medium"><%= t(".notifications") %></h6>
         <% if notifications.unread.exists? %>
          <%= button_to mark_all_as_read_notifications_path,
              class: "text-xs link-primary link link-hover",
              data: { turbo_method: :post } do %>
            <%= t(".mark_all_as_read") %>
          <% end %>
        <% end %>
      </div>
      <div class="list max-h-96 overflow-y-auto ">
        <% if notifications.any? %>
          <%= render partial: "layouts/_header/notification_item", collection: notifications, as: :notification %>
        <% else %>
          <div class="text-center text-base-content py-4">
            <p class="text-sm"><%= t(".no_notifications") %></p>
          </div>
        <% end %>
      </div>
    </div>
  </div>
</div>
